<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model="searchName"
      />
      <button @click="search">Search</button>
    </div>
  </section>
</template>

<script>
import axios from "axios";

export default {
  name: "Search",
  data() {
    return {
      searchName: "",
    };
  },
  methods: {
    async search() {
      const searchName = this.searchName.trim();
      if (!searchName) {
        alert("请输入搜索内容");
        return;
      }
      // 搜索
      // 切换loading状态
      this.$bus.$emit("setLoading", true);

      const res = await axios({
        method: "GET",
        url: "https://api.github.com/search/users",
        params: {
          // querystring参数
          q: searchName,
        },
      });

      const users = res.data.items.map((user) => {
        return {
          id: user.id,
          login: user.login,
          html_url: user.html_url,
          avatar_url: user.avatar_url,
        };
      });

      this.$bus.$emit("setLoading", false);
      this.$bus.$emit("setUsers", users);
    },
  },
};
</script>

<style>
</style>